

let btn = document.querySelector('button')

btn.addEventListener('click',function(e){
  let mouseX = e.clientX
  let mouseY = e.clientY

  let targetX = btn.offsetLeft
  let targetY = btn.offsetTop

  let left = mouseX - targetX
  let top = mouseY - targetY


  let ripple = document.createElement('div')
  ripple.classList.add('ripple')
  ripple.style.left = left+'px'
  ripple.style.top = top+'px'
  btn.appendChild(ripple)


  setTimeout(() => {
    // btn.removeChild(ripple)
  }, 500);
  console.log(targetY , e.target.offsetTop);
  console.log(top);
})